<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq事件</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <p>如果你点我，我就会消失。</p>
    <p>点我消失!</p>
    <p>点我也消失!</p>
    <input type="text">
    <span>0</span>
    <hr>

    <form action="">
        用户名:<input type="text" name="username" value="wdw">
        密码:<input type="text" name="password" value="123456">
        <input type="submit" value="提交">
    </form>
    <hr>
    <p>窗口重置了 <span class="sp">0</span> 次大小。</p>
    <p>尝试重置窗口大小。</p>
    <hr>
    <div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！xxxxxxxxxxxasdasdasdasdasdsadasdasdasd</div>
    <script>
        /*    // 鼠标单击事件click
$(function(){
   $("p").click(function(){
       $(this).hide()
   })
}) */

        /* // 双击鼠标事件dblclick
        $(function(){
            $("p").dblclick(function(){
                $(this).hide()
            })
        }) */


        /* // 鼠标进入事件mouseenter
        $(function(){
            $('p').mouseenter(function(){
                alert(123)
            })
        }) */

        /* // mouseleave鼠标离开事件
        $(function(){
            $('p').mouseleave(function(){
                alert('你的鼠标离开了')
            })
        }) */

        /* // 鼠标按下mousedown
        $(function(){
            $('p').mousedown(function(){
                alert('你的鼠标按下了')
            })
        }) */

        /* 
        // mouseup鼠标按下又松开了
        $(function(){
            $('p').mouseup(function(){
                alert('你的鼠标按下又松开了')
            })
        }) 
        */
/* // hover()方法用于模拟光标悬停事件。

// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
        $(function () {
            $('p').hover(
                function () {
                    alert('鼠标悬停')
                },
                function(){
                    alert('悬停结束了')
                }

            )
        }) */

        /* // focus是光标聚焦的事件
        $(function(){
            $("input").focus(function(){
                $(this).css('background-color','#bfa')
            })
        }) */

        /* // blur是光标失焦的事件
        $(function(){
            $("input").blur(function(){
                $(this).css('background-color','yellow')
            })
        }) */

        /* // keypress为键盘被按下事件
        var i = 0
        $(function(){
            $('input').keypress(function(){
                $('span').text(i+=1)
            })
        }) */

       /*  // keydown是按下的过程
        $(function(){
            $('input').keydown(function(){
                $('input').css('background-color','red')
            })
        }) */

        /* // keyup是按键弹起的过程
        $(function(){
            $('input').keyup(function(){
                $('input').css('background-color','red')
            })
        }) */

        /* // submit表单的提交
        $(function(){
            $('form').submit(function(){
                alert('表单提交了')
            })
        }) */

        /* // change表示文本被修改了
        $(function(){
            $('input').change(function(){
                alert('文本被修改了')
            })
        })
            */

    /* // resize是浏览器窗口的重置
    var x = 0
    $(document).ready(function(){
        $('window').resize(function(){
            $('.sp').text(x++)
        })
    }) 
    */

    /* // scroll表示对元素的滚动次数进行计数
    x = 0
    $(document).ready(function(){
        $('window').scroll(function(){
            $('.sp').text(x++)
        })
    })  */



    </script>
</body>

</html>